<template>
    <el-table :data="that.tableData" style="width: 100%">
        <el-table-column type="index" width="50"/>
        <el-table-column label="taskId" prop="taskId"/>
        <el-table-column label="projectId" prop="projectId"/>
        <el-table-column label="任务类型" prop="taskTypeName"/>
        <el-table-column label="任务状态" prop="taskStatusName"/>
        <el-table-column label="任务开始时间" prop="startTime"/>
        <el-table-column label="任务结束时间" prop="endTime"/>
        <el-table-column label="创建时间" prop="createTime"/>
        <el-table-column align="right">
            <template #header>
                <el-input v-model="search" size="small" placeholder="输入文件名筛选"/>
            </template>
            <template #default="scope">
                <el-button size="small"
                           disabled
                           type="primary"
                           @click="handlePreview(scope.$index, scope.row)">
                    详情
                </el-button>
                <el-button size="small"
                           type="danger"
                           @click="handleDelete(scope.$index, scope.row)">
                    终止
                </el-button>
            </template>
        </el-table-column>
    </el-table>
    <br>
    <el-pagination
            v-model:current-page="that.pageNumber"
            v-model:page-size="that.pageSize"
            :page-sizes="[10, 20]"
            :small="false"
            :disabled="false"
            :background="true"
            layout="total, sizes, prev, pager, next, jumper"
            :total="that.total"
            @size-change="pagingQueryFile()"
            @current-change="pagingQueryFile()"
    />

  <!--    <el-dialog v-model="dialogTableVisible"-->
  <!--               :title="previewSource.title"-->
  <!--               width="60%"-->
  <!--               @close="previewSource.title='无'">-->
  <!--        <div class="">-->
  <!--            <el-image v-else-->
  <!--                      :src="previewSource.src"-->
  <!--            />-->
  <!--        </div>-->
  <!--    </el-dialog>-->
</template>

<script setup>
import {inject, onMounted, reactive} from 'vue'
import {ElMessage, ElMessageBox} from "element-plus";
import axios from "axios";

// 使用 inject 获取全局变量
const $host = inject('$host');
axios.defaults.baseURL = $host
const that = reactive({
    tableData: [],
    pageNumber: 1,
    pageSize: 20,
    total: 0
})

onMounted(() => {
    console.log('mounted...');
    // 加载表格数据
    pagingQueryFile()
})

function pagingQueryFile() {
    axios({
        method: 'GET',
        url: '/cloud/task',
        params: {
            pageNumber: that.pageNumber - 1,
            pageSize: that.pageSize
        }
    }).then(({data}) => {
        if (data.code === 200) {
            that.total = data.data.total
            that.tableData = data.data.data.map(item => {
                let taskTypeName = ""
                switch (item.taskType) {
                    case 1:
                        taskTypeName = "视频抽帧";
                        break
                    case 2:
                        taskTypeName = "预览录制";
                        break
                    case 3:
                        taskTypeName = "回放录制";
                        break
                    case 4:
                        taskTypeName = "即时录制";
                        break
                    case 5:
                        taskTypeName = "全景图片采集";
                        break
                    case 6:
                        taskTypeName = "抓拍";
                        break
                    default:
                        taskTypeName = item.taskType
                        break
                }
                item.taskTypeName = taskTypeName

                let taskStatusName = ""
                switch (item.taskStatus) {
                    case 0:
                        taskStatusName = "已完成";
                        break
                    case 1:
                        taskStatusName = "等待中";
                        break
                    case 2:
                        taskStatusName = "处理中";
                        break
                    case 3:
                        taskStatusName = "已结束";
                        break
                    case 4:
                        taskStatusName = "异常结束";
                        break
                    default:
                        taskStatusName = item.taskStatus
                        break
                }
                item.taskStatusName = taskStatusName
                return item;
            })
            console.log(that.tableData)
        }
    })
}

function handlePreview(index, row) {
    console.log(index, row)
    axios({
        method: 'GET',
        url: '/cloud/task/' + row.taskId
    }).then(({data}) => {
        console.log(data)
    })
}

function handleDelete(index, row) {
    console.log(index, row)
    ElMessageBox.confirm('确认终止任务【' + row.taskId + '】吗？', '系统提示', {type: 'warning'})
        .then(() => {
            axios({
                method: 'PUT',
                url: '/cloud/task/' + row.taskId,
                params: row
            }).then(({data}) => {
                if (data.code === 200) {
                    ElMessage({
                        message: data.msg,
                        type: 'success',
                    })
                    pagingQueryFile()
                } else {
                    ElMessage({
                        message: data.msg,
                        type: 'error',
                    })
                }
            })
        })
        .catch(() => {
            ElMessage({
                type: 'info',
                message: 'Delete canceled',
            })
        })
}
</script>
